<template>
    <teleport :to='teleport'>
        <van-popup v-model:show="show" position="bottom" @close="close">
            <div class="payTypeBox">
                <h3>请选择付款方式</h3>
                <p>注：本商品为艺术品，不支持退换货，介意请勿付款！</p>
                <div class="payItem">
                    <a @click="selectItem('WECHAT_PAY')"><img src="/images/pay1.png" alt=""/><span>微信</span></a>
                    <a @click="selectItem('ALIPAY')"><img src="/images/pay2.png" alt=""/><span>支付宝</span></a>
                    <a @click="selectItem('UNIONPAY')"><img src="/images/pay3.png" alt=""/><span>云闪付</span></a>
                   <!--  <a @click="selectItem('ECNY')"><img src="/images/pay4.png" alt=""/><span>ECNY</span></a> -->
                </div>
            </div>
        </van-popup>
    </teleport>
</template>

<script>
import { reactive,toRefs,getCurrentInstance } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import {Popup as vanPopup} from 'vant'
export default {
    props:{
        show:Boolean,
        teleport:{
            type:String,
            default:()=>'body'
        },
    },
    components:{
        vanPopup
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
           
        })

        const close = ()=>{
           context.emit('update:show', false)
        }
        const selectItem = (payType)=>{
            context.emit('change', payType)
        }

        return{
            ...toRefs(state),
            close,
            selectItem
        }
    }
}
</script>

<style lang="scss" scoped>
    .payTypeBox{
        text-align: center;
        color: #000;
        line-height: normal;
        h3{
            font-size: 34px;
            font-weight: 500;
            padding: 40px 0 0 0;
            margin: 0;
        }
        p{
            font-weight: 500;
            font-size: 26px;
            font-weight: 500;
            color: #f09431;
            padding: 20px 0 0 0;
        }
        .payItem{
            display: flex;
            padding: 30px 0 45px 0;
            a{
                flex: 1;
                color: #000;
                img{
                    display: block;
                    width: 96px;
                    height: 96px;
                    margin: 0 auto;
                }
                span{
                    display: block;
                    font-weight: 500;
                    font-size: 26px;
                    padding: 10px 0 0 0;
                }
            }
        }
    }
</style>